import React from 'react';
import { Link } from 'react-router-dom';
import LogoHeader from '../../../components/Header/LogoHeader';

import styles from './index.module.less';

export default class PasswordFind extends React.Component {
  render() {

    const rightContent = (
      <div className={ styles.menuBox }>
        <Link className={ styles.menuItem } to='/'>首页</Link>
        <Link className={ styles.menuItem } to='/login'>登录</Link>
        <Link className={ styles.menuItem } to='/register'>注册</Link>
        <Link className={ styles.menuItem } to='/'>帮助中心</Link>
      </div>
    );

    return (
      <React.Fragment>
        <LogoHeader moduleName='重置密码' rightContent={ rightContent } />
        <div className={styles.content}>
          <div className={styles.box}>
            <div className={styles.text}>请选择则验证方式</div>
            <div className={styles.mobileBox}>
              <div className={styles.pullLeft}>
                <i className={`iconfont icon-shouji3 ${styles.mobileIcon}`}></i>
              </div>
              <div className={styles.pullLeft}>
                <div style={{ marginTop: '39px', fontSize: '16px' }}>通过短信验证码验证</div>
                <div style={{ marginTop: '5px', fontSize: '12px' }}>通过注册手机号验证码辅助重置密码</div>
              </div>
              <div className={styles.pullRight} style={{ marginTop: '24px', fontSize: '16px' }}>
                <Link to='/message'>
                  <i className={`iconfont icon-youjiantou ${styles.youjiantouIcon}`}></i>
                </Link>
              </div>
            </div>
            <div className={styles.clearfix}></div>
            <div className={styles.mobileBox}>
              <div className={styles.pullLeft}>
                <i className={`iconfont icon-youjian ${styles.mobileIcon}`}></i>
              </div>
              <div className={styles.pullLeft}>
                <div style={{ marginTop: '39px', fontSize: '16px' }}>通过绑定邮箱验证</div>
                <div style={{ marginTop: '5px', fontSize: '12px' }}>通过已绑定邮箱辅助重置密码</div>
              </div>
              <div className={styles.pullRight} style={{ marginTop: '24px', fontSize: '16px' }}>
                <Link to='/email'>
                  <i className={`iconfont icon-youjiantou ${styles.youjiantouIcon}`}></i>
                </Link>
              </div>
            </div>
            <div className={styles.clearfix}></div>
            <div className={styles.text3}>
              <span>遇到麻烦？</span>
              <span>请致电客服协助您400-681-6018(周一至周日 9:30-17:00)</span>
            </div>
            <div className={styles.text4}>
              <span className={styles.s1}>还没有账号？</span>
              <span><Link to='/register'>立即免费注册</Link> </span>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
